
<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-button type="primary" @click="open">跳往支付页</el-button>
                <el-button type="primary" @click="getPayQrCode">显示付款码</el-button>
                <el-button type="primary" @click="refund">退款</el-button>
                <p></p>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="11%" :before-close="handleClose">
                    <iframe id="alipayFrame" width="210px" height="210px"></iframe>
                    <img id="qrious" />
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            qrCode: null,
            dialogVisible: false,
        }
    },
    methods: {
        open(){
            this.getPayHtml();
            this.dialogVisible = true;
        },
        getPayHtml() {
            this.$axios.post("/api/staffOrder/alipay/getPayHtml?orderNum=1795303062198423552").then(response => {
                
                // iframe形式
                const iframe = document.getElementById('alipayFrame');

                iframe.srcdoc = response.data;
                
                // 弹窗形式
                // const divForm = document.getElementsByTagName("div");

                // if (divForm.length) {
                //     document.body.removeChild(divForm[0]);
                // }
                // const div = document.createElement("div");
                // div.innerHTML = response.data; // data就是接口返回的form 表单字符串
                // document.body.appendChild(div);
                // document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                // document.forms[0].submit();
            });
        },

        refund() {
            this.$axios.post("/api/staffOrder/alipay/refund?orderNum=1793533280453267456&totalPrice=30").then(response => {
                let resp = response.data;
                if (resp.code == 200) {
                    this.$message({
                        message: resp.msg,
                        type: "success"
                    });
                }
            });
        }
    },
    created() { },
    mounted() { }
}
</script>

<style scoped></style>